<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <!-- <link rel="stylesheet" href="./css/0.css"> -->
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <div class="warp" id="warp">

        <div class="header">
            <span>悦听</span>
            <!-- 搜索歌曲 -->
            <input type="search" name="" id="" placeholder="歌曲搜索" v-model="query" @keyup.enter="searchMusic">
        </div>

        <!-- <div class="content">
            <div id="player">
                <div class="left">123 </div>
                <div class="center">123</div>
                <div class="right">123</div>
            </div>
        </div> -->

        <div class="main">
            <div class="news">
                <!-- 播放歌曲列表 -->
                <div class="news1">
                    <ul class="song_wrapper">
                        <ul class="song_list">
                            <li v-for="(item, index) in musicList" :key="index">
                                <a href="javascript:;" @click="playMusic(item.id)"><img src="./Images/播放1.png" alt=""> </a>
                                <b>{{item.name}} </b>
                                <span><i></i></span>
                            </li>
                            <!-- <li><a href="javascript:;"><b>青花瓷</b> </a></li> -->
                        </ul>
                    </ul>
                </div>
                <div class="news2">
                    <img src="./Images/2.jpg" alt="">
                </div>
                <div class="news3">
                    <span>热门歌曲</span>
                </div>
            </div>
        </div>

        <div class="footer">
            <!-- <span>高能进度条</span> -->
            <audio src="" :src="musicUrl" autoplay controls loop class="myaudio"></audio>
        </div>
    </div>

    <!-- <audio src=""></audio> -->

    <!-- 开发环境版本 -->
    <script src="../vue.js"></script>
    <script src="./js/vue.js"></script>
    <!-- axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入js -->
    <script src="./js/main.js"></script>
</body>

</html>